<template>
  <div>
    <div>
      <head-vue></head-vue>
    </div>

    <div style="border-right: 1px solid #f0f0f0;width: 10%;height:93.5%;position:fixed;left: 0;top: 3.74rem;" >


      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item  title=" 用户管理 " name="1"  class="han">

<!--          <div id="menu-1" class="m-active" @click="menu1()">
            <i class="bi bi-person-lines-fill ml-4 h6"></i> 用户概况
          </div>-->
          <div id="menu-2" class="" @click="menu2()">
            <i class="bi bi-search ml-4"></i> 用户查询
          </div>

        </el-collapse-item>
        <el-collapse-item title=" 会员卡管理" name="2"  class="han">
          <div id="menu-3" class="" @click="menu3()">
            <i class="bi bi-search ml-4"></i> 会员卡等级
          </div>
          <div id="menu-4" class="" @click="menu4()">
            <i class="bi bi-search ml-4"></i> 开卡记录
          </div>
        </el-collapse-item>

<!--        <el-collapse-item title=" 财务管理" name="3"  class="han">
&lt;!&ndash;          <div id="menu-5" class="" @click="menu5()">
            <i class="bi bi-credit-card ml-4"></i> 积分流水
          </div>
          <div id="menu-6" class="" @click="menu6()">
            <i class="bi bi-coin ml-4"></i> 余额流水
          </div>&ndash;&gt;
        </el-collapse-item>-->

      </el-collapse>
    </div>
    <UserProfile id="UserProfile"></UserProfile>
    <UserSearchList id="UserSearchList" v-show="flag"></UserSearchList>
    <CardGrade id="CardGrade" v-show="flag2"> </CardGrade>
    <CardRecord id="CardRecord" v-show="flag3"></CardRecord>
    <IntegralFlow id="IntegralFlow" v-show="flag4"></IntegralFlow>
    <BalanceFlow id="BalanceFlow" v-show="flag5"></BalanceFlow>
  </div>
</template>

<script>
  import CardRecord from "../components/CardRecord";
  import IntegralFlow from "../components/IntegralFlow";
  export default {
    name: "App",
    components: {IntegralFlow, CardRecord},
    data() {
      return {
        activeNames: ['1'],
        flag:false,
        flag2:false,
        flag3:false,
        flag4:false,
        flag5:false
      };
    },
    methods: {
      handleChange(val) {
        console.log(val);
      },
      menu1(){
        $("#menu-1").attr("class","m-active")
        $("#menu-2").attr("class"," ")
        $("#menu-3").attr("class"," ")
        $("#menu-4").attr("class"," ")
        $("#menu-5").attr("class"," ")
        $("#menu-6").attr("class"," ")
        $("#UserProfile").fadeIn(300)
        $("#UserSearchList").hide()
        $("#CardGrade").hide()
        $("#CardRecord").hide()
        $("#IntegralFlow").hide()
        $("#BalanceFlow").hide()

      },
      menu2(){
        $("#menu-1").attr("class"," ")
        $("#menu-3").attr("class"," ")
        $("#menu-4").attr("class"," ")
        $("#menu-5").attr("class"," ")
        $("#menu-6").attr("class"," ")
        $("#menu-2").attr("class","m-active")
        $("#UserSearchList").fadeIn(300)
        $("#UserProfile").hide()
        $("#CardGrade").hide()
        $("#CardRecord").hide()
        $("#IntegralFlow").hide()
        $("#BalanceFlow").hide()

        this.flag = true;

      },
      menu3(){
        $("#menu-1").attr("class"," ")
        $("#menu-2").attr("class"," ")
        $("#menu-4").attr("class"," ")
        $("#menu-5").attr("class"," ")
        $("#menu-6").attr("class"," ")
        $("#menu-3").attr("class","m-active")
        $("#CardGrade").fadeIn(300)
        $("#UserSearchList").hide()
        $("#UserProfile").hide()
        $("#CardRecord").hide()
        $("#IntegralFlow").hide()
        $("#BalanceFlow").hide()

        this.flag2 = true;

      },
      menu4(){
        $("#menu-1").attr("class"," ")
        $("#menu-2").attr("class"," ")
        $("#menu-3").attr("class"," ")
        $("#menu-5").attr("class"," ")
        $("#menu-6").attr("class"," ")
        $("#menu-4").attr("class","m-active")
        $("#CardRecord").fadeIn(300)
        $("#UserSearchList").hide()
        $("#UserProfile").hide()
        $("#CardGrade").hide()
        $("#IntegralFlow").hide()
        $("#BalanceFlow").hide()
        this.flag3 = true;

      },
      menu5(){
        $("#menu-1").attr("class"," ")
        $("#menu-2").attr("class"," ")
        $("#menu-3").attr("class"," ")
        $("#menu-6").attr("class"," ")
        $("#menu-4").attr("class"," ")
        $("#menu-5").attr("class","m-active")
        $("#IntegralFlow").fadeIn(300)
        $("#UserSearchList").hide()
        $("#UserProfile").hide()
        $("#CardGrade").hide()
        $("#CardRecord").hide()
        $("#BalanceFlow").hide()
        this.flag4 = true;

      },
      menu6(){
        $("#menu-1").attr("class"," ")
        $("#menu-2").attr("class"," ")
        $("#menu-3").attr("class"," ")
        $("#menu-5").attr("class"," ")
        $("#menu-4").attr("class"," ")
        $("#menu-6").attr("class","m-active")
        $("#BalanceFlow").fadeIn(300)
        $("#UserSearchList").hide()
        $("#UserProfile").hide()
        $("#CardRecord").hide()
        $("#IntegralFlow").hide()
        $("#CardGrade").hide()
        this.flag5 = true;

      },
    }
  }
</script>

<style scoped>
.han div{
  height: 3rem;
  line-height: 2.9rem;
}
li{
  list-style: none;
  /*background-color: #F0FAFF;*/
  cursor: pointer;
  height: 3rem;
  line-height: 2.9rem;
}
ul{
  padding: 0;
}
.m-active{
  background-color: #F0FAFF;
  border-right: 2px solid #2D8CF0;
}
</style>
